<template>
	<view class="bc-person" :style="{'height':height+'rpx'}">
		<!-- 头像名称 -->
		<view class="person-box" :style="{'height':height+'rpx'}">
			<view class="person-header">
				<uv-avatar :src="api.FileById+userStore.avatar" size="128rpx"></uv-avatar>
				<view class="header-right">
					<p class="header-right-name">{{userStore.nickName}}</p>
					<view class="header-right-auth">申请认证摄影师</view>
					<view class="header-right-setting" @click="settingShow">
						<uv-icon name="setting-fill" size="52rpx" color="#282828"></uv-icon>
					</view>
				</view>
				
			</view>
			<!-- 统计 -->
			<view class="person-statistics">
				<!-- <view class="statis-item">
					<view class="statis-item-number">1</view>
					<view class="statis-item-text">&nbsp;获赞</view>
				</view> -->
				<view class="statis-item">
					<view class="statis-item-number">{{userStore.followers.length}}</view>
					<view class="statis-item-text">&nbsp;关注</view>
				</view>
				<view class="statis-item">
					<view class="statis-item-number">{{fans.length}}</view>
					<view class="statis-item-text">&nbsp;粉丝</view>
				</view>
			</view>
			<uv-line></uv-line>
			<!-- 选项卡 -->
			<uv-tabs lineColor="#282828" lineWidth="180rpx" :itemStyle="{'width':'180rpx','height':'80rpx'}"
				:list="tabs" @click="tabChange"></uv-tabs>
			<!-- 瀑布流 -->
			<view class="person-waterfall" v-if="tabIndex == 0 || tabIndex == 2">
				<!-- 作品 -->
				<uv-waterfall ref="waterfall" v-model="list">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<view v-for="item in list1" @click="photographClick(item)">
							<uv-image :src="item.file.url" :width="item.file.width"
								:height="item.file.height"></uv-image>
							<view class="waterfall-content">
								<view class="content-name">{{item.name.slice(0,8)}}</view>
								<view class="content-statistic" v-if="tabIndex == 0">
									<uv-icon name="eye-fill" color="#f29f52" size="32rpx"></uv-icon>
									<view class="statistic-value">
										{{item.watchCount>1000?(item.watchCount/1000).toFixed(1)+'k':item.watchCount}}
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<view v-for="item in list2" @click="photographClick(item)">
							<uv-image :src="item.file.url" :width="item.file.width"
								:height="item.file.height"></uv-image>
							<view class="waterfall-content">
								<view class="content-name">{{item.name.slice(0,8)}}</view>
								<view class="content-statistic" v-if="tabIndex == 0">
									<uv-icon name="eye-fill" color="#f29f52" size="32rpx"></uv-icon>
									<view class="statistic-value">
										{{item.watchCount>1000?(item.watchCount/1000).toFixed(1)+'k':item.watchCount}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</view>
			<view class="person-star" v-else-if="tabIndex == 1">
				<view class="star-item" v-for="item in stars" @click="toStarItem(item.id)">
					<view class="item-header">
						<view class="header-name">
							{{item.name}}
						</view>
						<view class="header-statistics">
							{{item.children.length}}个作品·<view class="flex" v-if="item.isPublicly">公开<uv-icon
									name="lock-opened-fill"></uv-icon></view>
							<view class="flex" v-else>私密<uv-icon name="lock-fill"></uv-icon></view>
						</view>
					</view>
					<view class="item-content">
						<view class="" v-for="photo in item.children">
							<uv-image width="168rpx" mode="aspectFill" height="168rpx"
								:src="api.FileById+photo.photographFileShowId"></uv-image>
						</view>
						<view class="content-default"
							v-for="photo in (4-item.children.length <=0?0:4-item.children.length)">

						</view>
					</view>
				</view>
				<view class="star-button" @click='starModalShow'><uv-icon name="plus" color="#fff"
						size="32rpx"></uv-icon>创建收藏夹</view>
			</view>
			<view style="height: 61px;"></view>
		</view>
		<uv-modal ref="starModal" title="新建收藏夹" showCancelButton @confirm="starConfirm">
			<view class="slot-content">
				<uv-input placeholder="请输入收藏夹名称" border="surround" v-model="starData.name"></uv-input>
				<view class="isPublicly">设置为公开<uv-switch size="28rpx" v-model="starData.isPublicly"></uv-switch></view>
			</view>
		</uv-modal>
		<uv-toast ref="toast"></uv-toast>
		<c-tabbar></c-tabbar>
		<uv-popup ref="settingPop" mode="right" >
		<view class="pop-setting" >
			<view class="setting-body">
				<view class="item" v-for="item in settingList" @click="settingChange(item.id)">
					<view style="display: flex;">
						<view class="icon">
							<uv-icon top="10rpx" size="58rpx" :name='item.icon'></uv-icon>
						</view>
						<view class="title">
							{{item.title}}
						</view>
					</view>
					<uv-line></uv-line>
				</view>
				
				<view class="button">
					<uv-button type="primary" @click="logout" :customStyle="{height:'60rpx'}" text="退出登录" color="#ff2e55"></uv-button>
				</view>
			</view>
		</view>
		</uv-popup>
		<uv-modal ref="logoutModal" title="退出登录" confirmColor="#ff2e55" content='是否退出当前账号登录!' showCancelButton @confirm="logoutConfirm"></uv-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useLayouterStore
	} from '@/stores/layouter';
	const layouterStore = useLayouterStore()
	import { useUserStore } from '@/stores/user';
	const userStore = useUserStore()
	const height = 631
	import api from './api';
	const data = ref({
		avatar: '0b2af875-2045-4be0-88cb-c6d53c395a64'
	})
	const tabs = [{
		name: '作品'
	}, {
		name: '收藏'
	}, {
		name: '喜欢'
	}]
	const fans = ref([])
	const tabIndex = ref(0)
	const toast = ref()
	const starModal = ref()
	const starData = ref({})
	const stars = ref([])
	
	const getFans = ()=>{
		api.getFans("").then(res=>{
			fans.value = res.datas
		})
	}
	getFans()
	
	const getStars = () => {
		api.getStar().then(res => {
			stars.value = res.datas
		})
	}
	getStars()
	const toStarItem = (starId) => {
		uni.navigateTo({
			url: '/pages/person/starItem?id=' + starId
		})
	}
	const starModalShow = () => {
		starData.value = {}
		starModal.value.open()
	}
	const starConfirm = () => {
		api.addStar(starData.value).then(res => {
			if (res.successed) {
				toast.value.show({
					type: 'success',
					message: res.message
				})
			}
		})
		starModal.value.close()
	}

	// 设置右侧弹出层
	const settingPop = ref()
	const settingShow = () => {
		settingPop.value.open()
	}
	const settingList = [{id:1,title:'编辑资料',icon:'edit-pen'}]
	//点击右侧按钮
	const settingChange =(id)=>{
		if(id == 1){
			settingPop.value.close()
			uni.navigateTo({
				url:'/pages/person/editInfo'
			})
		}
	}
	
	//退出登录
	const logoutModal = ref()
	const logout = ()=>{
		logoutModal.value.open()
	}
	const logoutConfirm = ()=>{
		userStore.token = ''
		userStore.avatar = ''
		userStore.nickName = ''
		userStore.followers = []
		uni.reLaunch({
			url:'/pages/login/index'
		})
	}

	const tabChange = (e) => {
		tabIndex.value = e.index
		if (e.index == 0) {
			getPhotograph()
		} else if (e.index == 2) {
			getLikes()
		} else {
			getStars()
		}
	}
	const photographClick = (e) => {
		if (tabIndex.value == 2) {
			uni.navigateTo({
				url: '/pages/home/detail?id=' + e.photographId
			})
		}
	}
	const getLikes = async () => {
		api.getLikeByUser().then(res => {
			res.datas.forEach(item => {
				let id = item.photographFilesIds.split(",")[0];
				item.file = ref({
					width: "322rpx",
					url: api.FileById + id,
					height: "219.45rpx", // 默认高度
					id: id
				})
				api.getDimensionsById(id).then(res => {
					let size = res.split(",");
					let t = size[0] / 322;
					// 使用 Vue 的响应式更新方式
					item.file.value.height = size[1] / t + 'rpx';
				});
			});

			photographs.value = res.datas;
			list.value = res.datas;
			list1.value = res.datas.filter((item, index) => index % 2 === 0);
			list2.value = res.datas.filter((item, index) => index % 2 === 1);
		});
	}
	const waterfall = ref()
	const list = ref([])
	const list1 = ref([])
	const list2 = ref([])

	const photographs = ref([])

	const getPhotograph = async () => {
		api.getPhotographByMyself().then(res => {
			res.datas.forEach(item => {
				let id = item.filesIds.split(",")[0];
				item.file = ref({
					width: "322rpx",
					url: api.FileById + id,
					height: "219.45rpx", // 默认高度
					id: id
				})
				api.getDimensionsById(id).then(res => {
					let size = res.split(",");
					let t = size[0] / 322;
					// 使用 Vue 的响应式更新方式
					item.file.value.height = size[1] / t + 'rpx';
				});
			});

			photographs.value = res.datas;
			list.value = res.datas;
			list1.value = res.datas.filter((item, index) => index % 2 === 0);
			list2.value = res.datas.filter((item, index) => index % 2 === 1);

			console.log(photographs.value);
		});
	};
	getPhotograph()

	const getMyself = () => {
		api.getByMyself().then(res => {
			if (res.successed) {
				data.value = res.data
			}
			console.log(res);
		})
	}
	
	
	
</script>

<style lang="scss">
	.bc-person {
		width: 100vw;
		background-color: #282828;

		.isPublicly {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 28rpx;

		}

		.person-star {
			position: relative;

			.star-button {
				position: absolute;
				display: flex;
				justify-content: left;
				width: 200rpx;
				height: 30rpx;
				line-height: 30rpx;
				padding: 20rpx;
				top: 800rpx;
				left: 230rpx;
				background-color: #2c2c2c;
				color: white;
				font-size: 28rpx;
				border-radius: 30rpx;
			}
		}

		.person-waterfall {
			margin: 20rpx 0;

			.waterfall-content {
				background-color: #f0f0f0;
				margin-bottom: 10px;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.content-name {
					height: 20rpx;
					line-height: 20rpx;
					padding: 20rpx;
					padding-bottom: 0;
					font-size: 28rpx;
				}

				.content-statistic {
					display: flex;
					top: -80rpx;
					position: relative;
					left: 20rpx;
					color: white;
					font-size: 28rpx;
					height: 20rpx;
					line-height: 20rpx;

					.statistic-value {
						padding-left: 10rpx;
					}
				}
			}
		}

		.person-box {
			background-color: white;
			height: 280rpx;
			border-top-right-radius: 60rpx;
			border-top-left-radius: 60rpx;
			padding: 32rpx;

			.person-star {
				.star-item {
					background: #f3f3f3;
					margin-top: 20rpx;

					.item-header {
						padding: 20rpx;

						.header-name {
							font-size: 30rpx;
						}

						.header-statistics {
							display: flex;
							justify-content: left;
							font-size: 14px;
							color: #666;

							.flex {
								display: flex;
							}
						}
					}

					.item-content {
						display: flex;
						justify-content: left;
						gap: 4rpx;

						.content-default {
							width: 168rpx;
							height: 168rpx;
							background-color: #ddd;
						}
					}
				}
			}

			.person-header {
				display: flex;
				justify-content: left;

				.header-right {
					padding-left: 40rpx;

					.header-right-name {
						font-weight: bold;
						font-size: 36rpx;
					}

					.header-right-auth {
						margin-top: 10rpx;
						width: 256rpx;
						height: 48rpx;
						line-height: 48rpx;
						background-color: #282828;
						border-radius: 30rpx;
						font-size: 24rpx;
						text-align: center;
						color: white;
					}

					.header-right-setting {
						position: absolute;
						right: 100rpx;
						top: 60rpx;
					}
				}
			}

			.person-statistics {
				display: flex;
				justify-content: left;
				height: 42rpx;
				line-height: 42rpx;
				padding: 10rpx 0 20rpx 0;

				.statis-item {
					display: flex;
					justify-content: left;
					margin-right: 20rpx;

					.statis-item-text {
						font-size: 24rpx;
						color: #333;
					}

					.statis-item-number {
						font-weight: bold;
						color: #2c2c2c;
					}
				}
			}
		}
		.pop-setting{
			width: 420rpx;
			padding: 30rpx;
			    background: #f6f6f6;
				height: 100vh;
				.setting-body{
					    padding: 20rpx;
					    border-radius: 20rpx;
					background-color: #fff;
					.item{
						    height: 80rpx;
						    line-height: 80rpx;
							.title{
								padding-left: 20rpx;
							}
						
					}
					.button{
						margin-top:20rpx ;
					}
				}
		}
	}
</style>